<template >
  <div class="Login" >\
    <div class="LoginBox">
    <el-form
      :model="loginData"
      :rules="rules"
      label-width="100px"
      ref="ruleForm"
    >
      <el-form-item label="账号" prop="username" class="LoginInput use">
        <el-input
          v-model="loginData.username"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>

      <br />
      <el-form-item label="密码" prop="password" class="LoginInput pwd">
        <el-input
          v-model="loginData.password"
          placeholder="请输入密码"
        ></el-input> </el-form-item
      ><br />
      <el-button type="success" class="LoginBut" @click="postValue"
        >登陆</el-button
      ></el-form
    >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginData: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请正确输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请正确输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    postValue() {
 
      this.$Req.post("/login", this.loginData).then((res) => {
        const { data, meta } = res.data;

        if (meta.status === 200) {
          this.$message({
            showClose: true,
            message: "登陆成功",
            type: "success",
          });
          this.$store.commit("userinfo", data);
          localStorage.setItem("userinfo", JSON.stringify(data));
          this.$router.push({ path: "/home" });
        } else if (meta.status === 400) {
          this.$message({
            showClose: true,
            message: "账号或密码错误",
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style>
.Login{
  width: 100%;
  height: 820px;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.027art.cn%2Fimg%2F2021%2F08%2F04%2F1628070886282445.jpg&refer=http%3A%2F%2Fimg3.027art.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648900758&t=3613cf3fffb1d60e0578d2361f5f5f4c) ;
     background-size: cover;

}
.LoginBox{
  margin: 15%;
}
.LoginInput {
  width: 300px;
  margin: 0 auto;
}
</style>